<template>
    <div class="center">
        
        <div class="top" style="height: 10%;width: 100%;">
            <h4>ChatGPT对话机器人
            </h4>
        </div>
        <div class="center1" style="height: 80%;width: 100%;">
            <div class="output" style="height: 80%;width: 90%;background-color: aqua;font-size: 10%;margin: auto;">
                <el-input v-model="textarea1" type="textarea" :autosize="{ minRows: 15 }" placeholder="请输入内容"
                    style="width: 100%;height: 100%;">
                </el-input>
            </div>

            <div class="input" style="height: 20%;width: 90%; font-size: 10%;margin: auto;">
                <p class="input1">
                    <el-input type="textarea" v-model="textarea"  placeholder="请输入内容"></el-input>
                    <!-- <p class="inputtext">
                        
                    </p> -->
                    <el-button type="success">提交</el-button>
                    <!-- <p class="inputbutton">
                        <el-button type="success">提交</el-button>
                    </p> -->
                  <!-- <p class="inputbutton">
                        <el-button type="success">提交</el-button>
                    </p> -->
                </p>
            </div>
        </div>

        <div class="container" style="height: 10%;width: 100%;float: left;">
            <h4>由于网络问题，结果生成需要一段时间，请耐心等待。</h4>
            <h4>技术支持：@思创数码技术中心/新技术研发部</h4>
        </div>
    </div>

</template>

<script>
export default {
    name: 'ChatGpt',
    props: {
        msg: String
    },
    data() {
        return {
            count: 0,
            textarea: null,
            textarea1: null
        }
    },
    methods: {
        load() {
            this.count += 2
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.input1{
    border: 10px;
    text-align: center;
}
.inputtext{
    height: 100%;
    width: 80%;
    float: left;
    background-color: blue;
}
.inputbutton{
    height: 100%;
    width: 19%;
    float: right;
    text-align: center;
    background-color: red;
}
.success{
    height: 100%;
    width: 100%;
    text-align: center;
}


</style>
